<template>
	<view class="flex-ju-c height90vh">
				<view class="flex-ju-c  bgfff ra50 ">
					<scroll-view scroll-y >
						<view class=" pg30 swipers ">
								<view class="flex-ju-b size28">
									<view>已测试<text class="colorFD2F55">{{num}}</text>个单词</view>
									<view class="flex-a-i">
										<view class="color999">
											 当前成绩
										</view>
										<view class="colorFD2F55 size35 bold ml10">
											 {{grade}}
										</view>
									</view>
								</view>
								<view class="flex-ju-c size72 bold mt50 mb80">{{info.word}}</view>
								
								<view v-for="(item,index) in arr" @click="tapdui(item)" :key="index" :class="item.isdui==1?'bgD3F1D0':item.isdui==2?'bgFFEFF2':''" class="flex-ju-b size24 mt30 bgF3F5F7 ra20 pg40-30">
									<view class="flex  width1000 ">
										<text class="color666 mr10">{{index==0?'A':index==1?'B':index==2?'C':'D'}}. </text> {{item.txt}}
									</view>
									<view>
										<image v-if="item.isdui==1" src="/static/zheng.png" mode="widthFix" class="flex image width40"></image>
										<image v-if="item.isdui==2" src="/static/xxx.png" mode="widthFix" class="flex image width40"></image>
									</view>
								</view>
								
								<view class="flex-ju-b mt30 size24">
									<view @click="tapren" class="borderD8D8D8 ra20 flex1 mr10 flex-ju-c height96">不认识</view>
									<view @click="tapresult" class="borderD8D8D8 ra20 flex1 ml10 flex-ju-c height96">查看结果</view>
								</view>
								
						</view>
					</scroll-view>
					   
				</view> 
		 
	</view>
</template>

<script>
	function shuffleArray1(array) {
	    // 获取数组的长度
	    let len = array.length;
	    // 当数组还有多个元素未处理时
	    while (len > 0) {
	        // 生成一个 0 到 len - 1 之间的随机整数，作为要交换的位置
	        let randomIndex = Math.floor(Math.random() * len);
	        // 将 len - 1 位置的元素与随机位置的元素交换
	        [array[len - 1], array[randomIndex]] = [array[randomIndex], array[len - 1]];
	        // 处理下一个元素，数组长度减 1
	        len--;
	    }
	    return array;
	}
	export default {
		data() {
			return {
				grade:0,
				num:0,
				info:{},
				arr:[],
				time:"",
				isfale:false,
			}
		},
		onLoad() {
			
		},
		onHide() {
			console.log(33333)
			clearTimeout(this.time)
		},
		onUnload() {
			console.log(44444)
			clearTimeout(this.time)
		},
		onShow() {
			var arr=[]
			this.http('/api/test_record',{
			},'post').then(res=>{
				arr.push({
					name:"1",
					letter:'A',
					txt:res.data.correctDef
				})
				arr.push({
					name:"0",
					letter:'B',
					txt:res.data.distractor1
				})
				arr.push({
					name:"0",
					letter:'C',
					txt:res.data.distractor2
				})
				arr.push({
					name:"0",
					letter:'D',
					txt:res.data.distractor3
				})
				this.arr=shuffleArray1(arr)
				
				this.info = res.data
			})
			
			clearTimeout(this.time)
			this.sTimeout()
		},
		methods: {
			sTimeout(){
				this.time = setTimeout(()=>{
					clearTimeout(this.time)
					
					uni.navigateTo({
						url:"result?num="+this.num+'&grade='+this.grade
					})
					uni.setStorageSync('grade',this.grade)
					this.grade = 0
					this.num = 0
					
				},300000)
			},
			tapresult(){
				clearTimeout(this.time)
				uni.navigateTo({
					url:"result?num="+this.num+'&grade='+this.grade
				})
				if(this.grade > (uni.getStorageSync('grade')?uni.getStorageSync('grade'):0)){
					uni.setStorageSync('grade',this.grade)
				}
				this.grade = 0
				this.num = 0
			},
			tapren(){
				clearTimeout(this.time)
				this.arr.map(items=>{
					if(items.name==1){
						items.isdui=1
					}
				})
				
				setTimeout(()=>{
					this.http('/api/test_record',{
						recordId:this.info.recordId,
						recordAnswer:3
					},'post').then(res=>{
						this.sTimeout()
						var arr=[]
						arr.push({
							name:"1",
							txt:res.data.correctDef
						})
						arr.push({
							name:"0",
							txt:res.data.distractor1
						})
						arr.push({
							name:"0",
							txt:res.data.distractor2
						})
						arr.push({
							name:"0",
							txt:res.data.distractor3
						})
						this.arr=shuffleArray1(arr)
						this.info = res.data
					})
				},2000)
				
			},
			tapdui(item){
				if(this.isfale){
					return
				}
				this.isfale = true
				clearTimeout(this.time)
				this.num++
				if(item.name==1){
					item.isdui=1
					this.grade+=100
				}else{
					item.isdui=2
					this.arr.map(items=>{
						if(items.name==1){
							items.isdui=1
						}
					})
				}
				
				setTimeout(()=>{
					this.http('/api/test_record',{
						recordId:this.info.recordId,
						recordAnswer:item.isdui
					},'post').then(res=>{
						this.sTimeout()
						this.isfale = false
						var arr=[]
						arr.push({
							name:"1",
							txt:res.data.correctDef
						})
						arr.push({
							name:"0",
							txt:res.data.distractor1
						})
						arr.push({
							name:"0",
							txt:res.data.distractor2
						})
						arr.push({
							name:"0",
							txt:res.data.distractor3
						})
						this.arr=shuffleArray1(arr)
						this.info = res.data
					})
				},2000)
				
			},
		}
	}
</script>

<style>
.swiperc{
		height:calc(100vh - 80rpx);
	}
	
	.swipers{
		width: 80vw;
		height:calc(100vh - 339rpx);
	}
page{
	background: #F3F5F7;
}
.bgD3F1D0{
	background: #EEECFF;
}
.bgFFEFF2{
	background: #FFEFF2;
}
</style>
